<template>
  <div class="page-department">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>采购
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="component-searchHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">
            <span class="iconfont">&#xe61e;</span> 采购申请
          </p>
        </div>
      </div>
    </div>
    <div class="component-search-box">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="采购单号：">
          <el-input clearable v-model="formInline.buyNo" placeholder="请输入采购单号"></el-input>
        </el-form-item>
        <el-form-item label="采购人：">
          <el-input clearable v-model="formInline.buyUser" placeholder="请输入采购人"></el-input>
        </el-form-item>
        <el-form-item label="总金额：">
          <el-input clearable v-model="totalCount" placeholder="请输入总金额" disabled></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="component-listHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">
            <span class="iconfont">&#xe61e;</span>
            材料列表
          </p>
          <!-- 添加按钮 -->
          <span
            class="upload"
            style="
              display:inline-block;
              color:#666;width: 105px;
              height: 30px;
              border: 1px solid #e4e4e4;
              background-color:#fff;
              font-size:14px;
              line-height:30px;
              margin-right:30px;
              margin-top:5px;
              "
            @click="addmaterList"
          >+&nbsp;&nbsp;添加材料</span>
        </div>
      </div>
    </div>

    <div class="table armorlistTable">
      <el-table ref="multipleTable" :data="multiples" tooltip-effect="dark" style="width:100%" border>
        <el-table-column label="序号" align="center" type="index" prop="type"></el-table-column>
        <el-table-column label="材料名称" align="center" prop="matName"></el-table-column>
        <el-table-column label="型号" align="center" prop="matModel"></el-table-column>
        <el-table-column label="采购数量" align="center">
          <template slot-scope="scope">
            <el-input-number size="small" @input.native="totalMoneys" v-model="scope.row.num" controls-position="right" :min="1"></el-input-number>
            <!--<el-input size="small" @input="totalMoneys" v-model.number="scope.row.num"></el-input>-->
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center">
          <template slot-scope="scope">
            <el-input-number size="small" v-model="scope.row.price" controls-position="right"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="金额" align="center">
          <template slot-scope="scope">
            {{scope.row.planMoney = scope.row.num * scope.row.price | numFilter}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <a @click="handleDele(scope.row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <span class="btn-search" @click="submitRes">提交</span>
    </div>

    <!-- 项目专业弹窗 -->
    <div class="component-model">
      <el-dialog title="选择材料" :visible.sync="dialogVisible" width="800px">
        <div class="input-box">
          <input type="text" style="float:left" v-model="chooseValue" class="model-input" placeholder="请输入关键字">
          <div class="search" style="float:left" @click="findRes">
            <span class="iconfont">&#xe63d;</span>
          </div>
          <div>
            <span
              class="upload"
              style="
              display:inline-block;
              color:#666;width: 105px;
              height: 30px;
              border: 1px solid #e4e4e4;
              background-color:#fff;
              font-size:14px;
              line-height:30px;
              margin-right:30px;
              margin-top:5px;
              "
              @click="addRadio"
            >+&nbsp;&nbsp;
            材料</span>
          </div>
          <div class="checkbox">
              <el-table
                ref="multipleTables"
                :data="checkInfo"
                tooltip-effect="dark"
                style="width:100%"
                border
                :row-key="getRowKey"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" align="center" width="80" :reserve-selection="true"></el-table-column>
                <el-table-column label="器材名称" align="center" width="240" prop="matName"></el-table-column>
                <el-table-column label="型号" align="center" prop="matModel"></el-table-column>
                <el-table-column label="单位" align="center" prop="matUnit"></el-table-column>
              </el-table>
            <!-- 分页 -->
            <div class="component-paging" v-if="checkInfo.length > 0">
              <div class="table-bottom">
                <div class="bottom-left" style="margin-left: 0px;">
                </div>
                <div class="paging">
                  <div class="paging-left">
                    <p>
                      共
                      <span>{{Math.ceil(total/pageSize)}}</span> 页/
                      <span>{{total}}</span> 条数据
                    </p>
                  </div>
                  <el-pagination
                    background
                    @size-change="SizeChange($event,materList,currentPage,pageSize)"
                    @current-change="CurrentChange($event,materList,currentPage,pageSize)"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30]"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="addPerson">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="添加材料" :visible.sync="dialogAdd" width="450px" class="component-modelMater">
        <el-form
          :model="ruleForms"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm addMater"
        >
          <el-form-item label="材料类型:" prop="matType">
            <el-input v-model="ruleForms.matType"></el-input>
          </el-form-item>
          <el-form-item label="材料名称:" prop="matName">
            <el-input v-model="ruleForms.matName"></el-input>
          </el-form-item>
          <el-form-item label="材料型号:" prop="matModel">
            <el-input v-model="ruleForms.matModel"></el-input>
          </el-form-item>
          <el-form-item label="材料单位:" prop="matUnit">
            <el-input v-model="ruleForms.matUnit"></el-input>
          </el-form-item>
          <el-form-item label="参考单价:" prop="price">
            <el-input v-model="ruleForms.price"></el-input>
          </el-form-item>
          <el-form-item label="除税价:" prop="taxExcludingPrice">
            <el-input v-model="ruleForms.taxExcludingPrice"></el-input>
          </el-form-item>
          <el-form-item label="材料主类:" prop="mainType">
            <el-select v-model="ruleForms.mainType" clearable placeholder="请选择材料主类" style="margin-left: 0px;width:310px;">
              <el-option v-for="(item,index) in options" :key="index" :label="item.const_name" :value="item.const_code"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <a @click="resetForm('ruleForm')">取消</a>
            <a @click="submitForm('ruleForm')">确定</a>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "proMaster",
  data() {
    return {
      checkInfo:[],//材料列表
      total: 2,// 数据总条数
      pageSize: 10,// 每页显示数据的条数
      currentPage: 1,// 当前显示的页面页码
      dialogVisible: false,//材料弹框是否显示
      dialogAdd:false,//添加材料弹框是否显示
      ruleForms:{
        matType: "",
        matName: "",
        matModel: "",
        matUnit: "",
        price: "",
        mainType:'',
        taxExcludingPrice:''
      },
      formInline: {
        buyNo: "", //采购单号
        buyUser:'',//采购人
        buyMoney:'',//采购金额
      },
      multiple:[], //选择材料列表
      multiples:[], //渲染选择材料列表
      multipleSelection:[], //提交时选中的列表
      chooseValue:'',//搜索选择的材料
      options:[],//材料主类
      rules:{
        matType: [{ required: true, message: '请输入材料类型', trigger: 'blur' }],
        matName: [{ required: true, message: '请输入材料名称', trigger: 'blur' }],
        matModel: [{ required: true, message: '请输入材料型号', trigger: 'blur' }],
        matUnit: [{ required: true, message: '请输入材料单位', trigger: 'blur' }],
        price: [{ required: true, message: '请输入参考单价', trigger: 'blur' }],
        mainType:[{ required: true, message: '请输入材料主类', trigger: 'change' }],
        taxExcludingPrice:[{ required: true, message: '请输入除税价', trigger: 'change' }]
      }
    };
  },
  mounted() {
  },
  computed:{
    //检测总金额变化
    totalCount() {
      let totalCount = this.totalMoneys();
      return totalCount ? totalCount : 0;
    },
  },
  methods: {
    //材料列表--点击添加材料
    addmaterList(){
      this.chooseValue = "";
      this.materList();
      this.$nextTick(function () {
        if(this.multiples.length>0){
          this.$refs.multipleTables.clearSelection();
        }
      })
    },
    //材料列表查询
    materList(){
      let that = this;
      let suCb = function(res){
        that.dialogVisible = true;
        that.checkInfo = res.data.data;
        that.total = res.data.rowCount;
        console.log(res.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        matName:that.chooseValue,
        pageSize:that.pageSize+"",
        pageCurrent:that.currentPage+"",
        supplyParty:'0'
      }
      let palyParam = {
        url: "/api/web/sysMaterial/selectByMatName",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    // 添加材料按钮
    addRadio() {
      this.mainTypes();//材料主类 耗材、设备
      this.dialogAdd = true;
      this.ruleForms = {
        matType: "",
        matName: "",
        matModel: "",
        matUnit: "",
        price: "",
        mainType:"",
        taxExcludingPrice:''
      }
    },
    //材料添加
    materAdd(){
      let that = this;
      let suCb = function(res){
        that.materList();
        that.dialogAdd = false;
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        sysMaterial:that.ruleForms
      }
      let palyParam = {
        url: "/api/web/sysMaterial/insertMaterial",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //材料添加
    submitForm(formName){
      let that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          that.materAdd();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //分页选中
    getRowKey(row){
      return row.matId
    },
    //重置添加材料表单
    resetForm(formName){
      this.$refs[formName].resetFields();
      this.dialogAdd = false;
    },
    //采购申请
    materApply(){
      let that = this;
      let suCb = function(res){
        that.$message({
          message: '提交成功',
          type: 'success'
        });
        that.formInline.buyNo = "";
        that.formInline.buyUser = "";
        that.formInline.buyMoney = "";
        that.multiples = [];
      }
      let erCb = function(res){
        if(res.data.message == "采购单号不可重复"){
          that.$message({
            message: '采购单号不可重复',
            type: 'error'
          });
        }
      }
      let postData = {
        buyNo:that.formInline.buyNo,
        buyUser:that.formInline.buyUser,
        buyMoney:that.formInline.buyMoney,
        proBuyList:that.multipleSelection,
      }
      let palyParam = {
        url: "/api/web/proBuyApply/InsertProBuyApply",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
      //搜索材料列表
    findRes(){
        this.currentPage = 1;
        this.materList();
    },
    //选中添加到页面
    addPerson(){
      this.dialogVisible = false;
//      this.multiples = this.multiple;
      this.multiples = this.multiples.concat(this.multiple);
      let hash = {};
      this.multiples = this.multiples.reduce(function(item, next) {
        hash[next.matId] ? '' : hash[next.matId] = true && item.push(next);
        return item
      }, [])
      console.log(this.multiples);
      this.totalMoneys();
    },
    //计算总金额
    totalMoneys(){
      let that = this;
      that.formInline.buyMoney = 0;
      that.multiples.forEach(function(value, index, array) {
        that.formInline.buyMoney += parseFloat(value.price) * parseFloat(value.num)
      });
      return that.formInline.buyMoney
    },
    //全选
    handleSelectionChange(val) {
      this.multiple = val
    },
    //删除
    handleDele(val){
      let newArr = this.multiples.filter(item => {
        if(val.matId !== item.matId) {
          return true
        }
      })
      this.multiples = newArr;
    },
    //点击保存
    submitRes(){
      if(this.formInline.buyNo == "" || this.formInline.buyUser == "" || this.multipleSelection == []){
        this.$alert('采购单号、采购人、材料不能为空', '提示', {
          confirmButtonText: '确定',
        });
      }else{
        let arr = [];
        if(this.multiples.length > 0){
          this.multiples.forEach( item => {
            arr.push({matId:item.matId,planNum:item.num,planMoney:item.planMoney,price:item.price})
            this.multipleSelection = arr;
          })
        }else{
          this.multipleSelection = [];
        }
        this.materApply();
      }
    },
    //材料主类
    mainTypes(){
      let that = this;
      let suCb = function(res){
        that.options = res.data.data;
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
          object:'MaterialClass'
      }
      let palyParam = {
        url: "/api/web/proProject/selectConst",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    }
  }
};
</script>

<style scoped>

.component-searchHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.component-searchHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-searchHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  line-height: 45px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-searchHeader .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.component-searchHeader .right button {
  padding: 0 15px;
  height: 30px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 12px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-searchHeader .right button:hover {
  background-color: #f3f3f3;
}

.component-search-box {
  width: 1100px;
  height: 60px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-top: none;
  margin: 0 auto;
  text-align: left;
  padding-left: 30px;
  line-height: 60px;
}

.component-search-box .el-input__inner {
  height: 35px;
  display: inline-block;
}

.component-listHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
  border-bottom: 0;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  line-height: 45px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  width: 80px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-listHeader .search-header .right button:hover {
  background-color: #f3f3f3;
}

.component-listHeader .search-header .right .right-select-margin {
  margin-top: 6px;
  margin-right: 8px;
}

.component-table-header {
  width: 1100px;
  margin: 0 auto;
  display: flex;
  border: 1px solid #e4e4e4;
  background-color: #f9fafc;
  height: 45px;
  line-height: 45px;
  padding: 0;
  list-style: none;
  justify-content: space-between;
  box-sizing: border-box;
  border-top: none;
}

.component-table-header li:first-child {
  width: 50px;
}

.component-table-header li:first-child span {
  border-radius: 5px;
  border: 2px solid #aba2a2;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 12.5px auto;
  line-height: 16px;
  font-size: 16px;
}

.component-table-header li {
  border-right: 1px solid #e4e4e4;
  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
  font-weight: 650;
  font-style: normal;
  font-size: 14px;
  color: #666666;
}
.component-table-header li:last-child {
  border: none;
}

.component-table-body {
  width: 1100px;
  margin: 0 auto;
  display: flex;
  border: 1px solid #e4e4e4;
  background-color: #fff;
  height: 45px;
  line-height: 45px;
  padding: 0;
  list-style: none;
  justify-content: space-between;
  box-sizing: border-box;
  border-top: none;
}

.component-table-body li {
  font-size: 12px;
  color: #666;
  text-align: center;
  border-right: 1px solid #e4e4e4;
}

.component-table-body li:first-child {
  width: 50px;
}

.component-table-body li:nth-child(2) {
  width: 100px;
}

.component-table-body li:nth-child(3) {
  width: 150px;
}

.component-table-body li:nth-child(4) {
  width: 150px;
}
.component-table-body li:nth-child(5) {
  width: 150px;
}

.component-table-body li:last-child {
  width: 500px;
  border-right: none;
}

.component-table-body li:last-child {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 0 auto;
}

.component-table-body li:last-child a {
  display: inline-block;
  text-align: center;
  color: #1abc9c;
  text-decoration: none;
  font-size: 12px;
}

.table {
  width: 1100px;
  margin: 0 auto;
}
/* 弹窗样式 */
.model-input {
  width: 190px;
  height: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  color: #ccc;
}
.search {
  width: 40px;
  height: 30px;
  border: 1px solid #ccc;
  border-left: none;
  line-height: 30px;
  background-color: #ccc;
}
.search:hover {
  cursor: pointer;
}

.radio-group {
  padding-top: 30px;
  padding-left: 30px;
}

.radio-group .el-radio {
  height: 30px;
}

.addpro {
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #ccc;
}
.addpro:hover {
  cursor: pointer;
}

.upload:hover {
  cursor: pointer;
}

.btn-search {
  display: inline-block;
  float: right;
  width: 80px;
  height: 40px;
  background-color: #1abc9a;
  margin-top: 50px;
  color: #fff;
  border-radius: 5px;
  font-size: 15px;
  line-height: 40px;
}
.btn-search:hover {
  cursor: pointer;
}

.el-table .cell a {
  color: #1abc9a;
  text-decoration: none;
  cursor: pointer;
}
  .checkbox{
    text-align: left;
    margin: 20px 0;
  }
.component-paging .table-bottom{
  width: 102% !important;
  margin-top: 30px;
  border:none;
}
</style>
